<template lang="pug">
div.activity-pc
  common-nav(title='hello')
  //- a(href="https://vitejs.dev" target="_blank")
  //-   img(src="/vite.svg" class="logo" alt="Vite logo")
  //- a(href="https://vuejs.org/" target="_blank")
  //-   img(src="@/assets/vue.svg" class="logo vue" alt="Vue logo")
  //- HelloWorld(msg="Vite + Vue")
  div 'state1:' {{state1}}
  button(@click="state1count1") 试试
  div 'state2:' {{state2.num}}
  button(@click="state1count2") 试试
  div 'state3:' {{num}}
  div 'computed-num2:' {{num2}}
  button(@click="state1count3") 试试
  div 'alretref.isShowRule:' {{alretref.isShowRule}}
  div 'isShowRule:' {{isShowRule}}
  button(@click="changeref") 试试
  <br/>
  <input type="text" placeholder="qqqqqqqqqqqqqqqq" />
  div.test 试一试
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";
import {
  defineComponent,
  // onBeforeMount,
  // onMounted,
  ref,
  reactive,
  toRef,
  computed,
} from "vue";
export default defineComponent({
  name: "App",
  components: {
    HelloWorld,
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  setup() {
    const state1 = ref(0);

    const state1count1 = () => {
      console.log(state1.value);
      state1.value++;
    };
    const state2 = ref({
      num: 1,
    });
    const state1count2 = () => {
      console.log(state2.value.num);
      state2.value.num++;
    };
    const state3 = reactive({
      num: 2,
    });
    const state1count3 = () => {
      console.log(state3.num);
      state3.num++;
    };
    // console.log("setup");
    // onBeforeMount(() => {
    //   console.log("onBeforeMount");
    // });
    // onMounted(() => {
    //   console.log("onMounted");
    // });
    const num2 = computed(() => {
      return state3.num + 10;
    });

    const alretref = ref({
      isShowRule: false,
      isShowInvite: false,
    });
    const isShowRule = alretref.value.isShowRule;
    const changeref = () => {
      alretref.value.isShowRule = !alretref.value.isShowRule;
    };

    return {
      state1,
      state1count1,
      state1count2,
      state1count3,
      state2,
      num: toRef(state3, "num"),
      num2,
      alretref,
      changeref,
      isShowRule,
    };
  },
});
</script>

<!-- <script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "AcChallenge",
  components: {
    HelloWorld,
  },
  data() {
    return {
      name: "testvue+vite",
    };
  },
  mounted() {
    console.log(this.msg);
    // this.$toast({
    //   message: '提示文案',
    //   duration: 2500,
    // });
    // this.$toast.loading({
    //   // message: '加载中...',
    //   forbidClick: true,
    //   loadingType: 'spinner',
    //   overlay: true
    // });
    this.$api
      .clockinGetClockinstatus({ activityCode: "49751f" })
      .then((res) => {
        // if (+res.status === 0 && res.data) {
        // 	this.endTime = res.data.endTime
        // 	this.beginTime = res.data.beginTime
        // 	this.systemTime = res.data.systemTime || new Date() * 1
        // 	// 判断是否要开始倒计时
        // 	this.judgeCountDown()
        // }
      });
  },
  methods: {},
};
</script> -->
<style scoped lang="stylus">
.logo
  height 6em
  padding 1.5em
  will-change filter

.logo:hover
  filter drop-shadow(0 0 2em #646cffaa)

.logo.vue:hover
  filter drop-shadow(0 0 2em #42b883aa)

.activity-pc
  background #fff

@media screen and (max-width: 960px) {
  .activity-pc {
    max-width: 100%;
    font-size: 16px;
  }
}
@media screen and (min-width: 961px) {
  .activity-pc {
    max-width: 375px;
    margin: 0 auto;
  }
}

.test {
  width: 100px;
  height: .2rem;
  color: red;
  background: blue;
  font-size: .3rem;
}
</style>
